<template>
  <div>
    <!--
      el-table - elementUi提供的table标签
        :data="tableData" - 表格数据，属性绑定的值来自于模型数据
        style="width: 100%" - 整个表格占屏幕宽度的100%
      el-table-column - elementUi提供的table标签中的列
        prop="date" - 当前列显示哪一个属性值
        label="日期" - 显示的标签
        width="180" - 当前列的宽度
    -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="100">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="120">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="120">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        label="操作">
        <el-button type="danger" size="mini">危险按钮</el-button>
      </el-table-column>
    </el-table>
    <!--
      el-pagination  - elmentUI提供的分页栏
        layout="prev, pager, next" - 布局
        :total="totals" - 总条数 - 动态获取
        :page-size="pageSize" - 每页显示的条数 - 动态获取
        :current-page="currentPage" - 当前页 - 动态获取
        align="right" - 显示在右侧
        @current-change = "goPage"   - 当前页改变的时候就会触发
    -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totals"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change = "goPage"
      align="right">
    </el-pagination>
  </div>
</template>

<script>

export default {
  data () {
    return {
      tableData:[],
      pageSize:5,
      currentPage:1,
      totals:100
    }

  },
  methods:{
    goPage(t){
      // 当前页
      this.currentPage = t;
      // 根据当前页重新加载分页数据
      this.list();
    },list(){
      this.$http.post("/department/list",{currentPage:this.currentPage,pageSize:this.pageSize}).then(res =>{
        console.log("====================================")
        this.totals =   res.data.totals;
        this.tableData = res.data.data;
      }).catch(res =>{

      })
    }
  }
,mounted() {// 页面加载完成会自动调用
    this.list();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1{
    background-color: #e6f15a;
  }
</style>
